<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>透明度 </title>
</head>
<body>
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>
<canvas id="canvas3" width="200" height="200"></canvas>
<script>
  var ctx1 = document.getElementById('canvas1').getContext('2d');
  var ctx2 = document.getElementById('canvas2').getContext('2d');
  var ctx3 = document.getElementById('canvas3').getContext('2d');
  for (var i = 0; i < 10; i++){
    ctx1.lineWidth = 1+i;
    ctx1.beginPath();
    ctx1.moveTo(5+i*14,5);
    ctx1.lineTo(5+i*14,140);
    ctx1.stroke();
  }
///////////////////////////  lineCap  设置端点    //////////////////////////////////////
  var lineCap = ['butt','round','square'];

  // 创建路径
  ctx2.strokeStyle = '#09f';
  ctx2.beginPath();
  ctx2.moveTo(10,10);
  ctx2.lineTo(140,10);
  ctx2.moveTo(10,140);
  ctx2.lineTo(140,140);
  ctx2.stroke();

  // 画线条
  ctx2.strokeStyle = 'black';
  for (var i=0;i<lineCap.length;i++){
    ctx2.lineWidth = 15;
    ctx2.lineCap = lineCap[i];
    ctx2.beginPath();
    ctx2.moveTo(25+i*50,10);
    ctx2.lineTo(25+i*50,140);
    ctx2.stroke();
  }
  ///////////////////////////  lineJoin  线段连接处    //////////////////////////////////////
  var lineJoin = ['round','bevel','miter'];
  ctx.lineWidth = 10;
  for (var i=0;i<lineJoin.length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(-5,5+i*40);
    ctx.lineTo(35,45+i*40);
    ctx.lineTo(75,5+i*40);
    ctx.lineTo(115,45+i*40);
    ctx.lineTo(155,5+i*40);
    ctx.stroke();
  }
</script>
</body>
</html>